<template>
  <div class="app-container">
    <el-card>
      <el-row type="flex" justify="end">
        <el-col><el-button type="primary" @click="addFn">添加房产</el-button></el-col>
        <el-select v-model="searchConfig.category" placeholder="全部分类">
          <el-option :value="searchConfig.isnull" label="全部分类" />
          <el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
        <el-select v-model="searchConfig.agent" placeholder="全部经纪">
          <el-option :value="searchConfig.isnull" label="全部经纪" />
          <el-option v-for="item in agentList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-input v-model="searchConfig.title_contains" />
        <el-button @click="searchFn">筛选</el-button>
      </el-row>
      <!-- 分割线 -->
      <el-divider />
      <!-- 表格 -->
      <el-table
        :data="propertiesTable"
        border
        height="calc(100vh - 270px)"
      >
        <el-table-column label="封面">
          <template v-slot="{row}">
            <el-image
              fit="cover"
              :src="row.image"
              :preview-src-list="[row.image]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="tags" label="标签">
          <template #default="{row}">
            <el-tag v-for="(tag,index) in row.tags" :key="index" type="success" size="mini" style="margin:0 20px">{{ tag }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" />
        <el-table-column label="分类">
          <template v-slot="{row}">
            {{ row.category&&row.category.title ? row.category.title : '无' }}
          </template>
        </el-table-column>
        <el-table-column label="经纪">
          <template v-slot="{row}">
            {{ row.agent&&row.agent.name ? row.agent.name : '无' }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="80" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column label="图片" width="100">
          <template v-slot="{row}">
            <el-image
              v-for="(imgurl, index) in row.photos"
              :key="index"
              style="width: 80px"
              fit="contain"
              :src="imgurl"
              :preview-src-list="row.photos"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template v-slot="{row}">
            <el-row>
              <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        background
        :total="totalPage"
        :page-size="pageConfig._limit"
        :current-page="ChangePage"
        @current-change="onPageChange"
        @size-change="onSizeChange"
      />
    </el-card>
    <!-- 对话框 -->
    <PropDialog
      ref="propDialog"
      :is-show-dialog.sync="showingDialog"
      :agent-list="agentList"
      :category-list="categoryList"
      :is-edit="isEdit"
      @reload="onReload"
    />
  </div>
</template>

<script>
import { getProperties, deleteProperty, getAgent, getCategory } from '@/api/estate'
import PropDialog from './components/prop_dialog'
export default {
  components: {
    PropDialog
  },
  data() {
    return {
      ChangePage: 1,
      propertiesTable: [],
      agentList: [],
      categoryList: [],
      showingDialog: false,
      isEdit: false,
      pageConfig: {
        _start: 0,
        _limit: 3
      },
      searchConfig: {
        isnull: null,
        title_contains: null,
        category: null,
        agent: null
      },
      totalPage: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 初始化
    async getList() {
      // 第一次请求：得到total page
      const res1 = await getProperties()
      this.totalPage = res1.data.length
      console.log(this.totalPage)

      // 第二次请求：获取并将数据存入data
      const res2 = await getProperties({ ...this.pageConfig, ...this.searchConfig })
      this.propertiesTable = res2.data
      console.log('列表数据', this.propertiesTable)

      // 请求经纪列表供筛选条和dialog使用
      const res3 = await getAgent()
      this.agentList = res3.data

      // 请求分类列表供筛选条和dialog使用
      const res4 = await getCategory()
      this.categoryList = res4.data
    },

    // 添加房产按钮
    addFn() {
      this.isEdit = false
      this.showingDialog = true
      this.$refs.propDialog.clearForm()
    },
    // 编辑
    editFn(id) {
      this.isEdit = true
      this.$refs.propDialog.echo(id)
      this.showingDialog = true
    },
    // 删除
    async delFn(id) {
      try {
        await this.$confirm('确定要删除吗?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        await deleteProperty(id)
        this.$message.success('删除成功')
        if (this.totalPage % this.pageConfig._limit === 1) this.pageConfig._start = this.pageConfig._start - this.pageConfig._limit
        this.getList()
      } catch (error) {
        console.log(error)
      }
    },
    // 改变页码
    onPageChange(page) {
      console.log('当前页', page)
      this.ChangePage = page
      console.log(111, this.ChangePage)
      this.pageConfig._start = (page - 1) * this.pageConfig._limit
      this.getList()
    },
    // 改变每页的条数
    onSizeChange(size) {
      console.log('每页的条数', size)
      this.pageConfig._limit = size
      this.getList()
    },
    // 点击确认提交表单通知父组件刷新数据
    onReload() {
      this.ChangePage = parseInt(this.totalPage / this.pageConfig._limit) + 1
      this.pageConfig._start = (this.ChangePage - 1) * this.pageConfig._limit
      console.log(11111, this.ChangePage)
      this.getList()
    },
    // 筛选按钮
    searchFn() {
      this.pageConfig._start = 0
      this.ChangePage = 1
      this.getList()
      this.$message.success('筛选结果更新')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input {
  width: 400px;
}
.el-pagination{
  text-align: center;
}
</style>
